<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="icon" href="https://www.bilibili.com/favicon.ico">
    <style>
        #root {
            width: 500px;
            margin: 200px auto;
            text-align: center;
        }

    </style>
</head>

<body>
    <div id="root">
        <!-- 自定义指令需要注意：
        1.命名使用v-big-number:  'big-number'(){}引号不能删除
        2.自定义指令内部，this全部指向windows
        3.同样可以定义全局自定义指令，vue.directive('big-number',{
            ....
        }) -->
        <h2>当前生瓜蛋子个数为：<span v-text='n'></span></h2>
        <h2>10倍生瓜蛋子个数为：<span v-fbind='n'></span></h2>
        <h2>10倍生瓜蛋子个数为：<span v-big='n'></span></h2>
        <button @click='n++'>click me add the guas</button>
        <hr />
        <a href="https://cn.vuejs.org/v2/guide/custom-directive.html">查看文档</a>
    </div>
    <script>
        Vue.config.productionTip = false
        const vm = new Vue({
            el: '#root',
            data: {
                n: 1
            },
            computed: {},
            watch: {},
            methods: {},
            // 直接操作dom元素
            directives: {
                // 函数式(简写)
                // 函数何时被调用？1.初次绑定，2.指令所在模板重新解析时
                big(element, binding,vNode,oldVnode) {
                    console.log('检测到重新解析|初次绑定，我也重新解析');
                    element.innerText = binding.value * 10
                },
                fbind: {
                    // 成功绑定
                    bind(element, binding) {
                        element.innerText = binding.value * 10
                    },
                    // 插入页面
                    inset(element, binding) {
                        element.focus()
                    },
                    // 重新解析
                    update(element, binding) {
                        element.innerText = binding.value * 10
                    },
                    // 解绑
                    unbind(){
                        console.log("解绑");
                    }
                }
            }
        })
    </script>
</body>

</html>
